【Vue3】watch和watchEffect的使用 |
您所在的位置：网站首页 › watch out和watch over › 【Vue3】watch和watchEffect的使用 |
|
watch函数 watch函数的定义： 监听data的变化，执行相应操作。 ps：跟vue2的配置 监听 ref定义的数据 基本类型数据作为监听值 对象作为监听值，需要加 .value 1. 引用: import { ref, watch } from “vue”; 2. 使用: setup(){ let numA = ref(0); let numB = ref(0); let objRef = ref({ num:0 }) watch([numA,numB],(newValue,oldValue)=>{ console.log('numA/numB发生了变化---',newValue,oldValue) }) watch(objRef.value,(newValue,oldValue)=>{ console.log('objRef发生了变化---',newValue,oldValue) },{ deep:true, // 深度监听 immediate:true, // 默认执行 }) }监听reactive定义的数据 对象作为监听值对象属性作为监听值，需要放到回调函数中 1. 引用: import { reactive, watch } from “vue”; 2. 使用: setup(){ let objReactive = reactive({ a:1, b:1, c:{ cc:1 } }); watch([()=>objReactive.a,()=>objReactive.b],(newValue,oldValue)=>{ console.log('objReactive发生了变化---',newValue,oldValue) }) watch(objReactive.c,(newValue,oldValue)=>{ console.log('objReactive.c发生了变化---',newValue,oldValue) }) }ps：监听reactive定义的对象，无法正确输出oldValue，且深度监听是强制开启的，无法关闭 watchEffect函数 watchEffect是vue3新增的一个函数 定义： watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。 引用： import { ref, watchEffect } from “vue”; 使用： setup(){ let num = ref(0) watchEffect(()=>{ let xd = num.value console,log('watchEffect函数执行了~') }) } watchEffect和watch的区别 属性监听 watch：手动添加 watchEffect：自动监听初始化执行 watchEffect：页面初始时会执行一次ps：一般场景推荐使用watch监听，逻辑简单、依赖属性少的场景可使用watchEffect函数。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |